<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,ul,ol,li,img {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box {
            width: 500px;
            height: 200px;
            padding: 7px;
            /*background-color: red;*/
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }
        .ad {
            width: 500px;
            height: 200px;
            position: relative;
            overflow: hidden;
        }
        #box img {
            width: 500px;
        }
        .ad ul li{
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }
        .ad ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 3000px;
        }
        .ad ul li.current {
            background: yellow;
        }
        .ad ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }
        .ad ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }
        .ad ol li.current {
            background: yellow;
        }
        #arr {
            display: none;
        }
        #arr span {
            width: 40px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            /*left: 5px;*/
            top: 50%;
            margin-top: -20px;
            background-color: #000;
            cursor: pointer;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }
        #arr #left{
            left: 5px;
        }
        #arr #right {
            right: 5px;
            /*left: auto;*/
        }
    </style>
</head>
<body>
<div id="box" class="all">
    <div class="ad">
        <ul id="imgs">
            <li><img src="images/1.jpg" width='500' height='200' alt=""/></li>
            <li><img src="images/2.jpg" width='500' height='200' alt=""/></li>
            <li><img src="images/3.jpg" width='500' height='200' alt=""/></li>
            <li><img src="images/4.jpg" width='500' height='200' alt=""/></li>
            <li><img src="images/5.jpg" width='500' height='200' alt=""/></li>
        </ul>
        <ol></ol>
    </div>
    <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script>
    //1.现获取要操作的对象
    var box = document.getElementById("box");
    var ad = box.children[0];
    var ul = ad.children[0];
    var ol = ad.children[1];
    var arr = box.children[1];
    var lis = ul.children;
    var left = document.getElementById("left");
    var right = document.getElementById("right");
    var imgWidth = ad.offsetWidth;//一张图片的宽度


    //2.动态创建小方块，然后设置消方块的样式
        for(var i=0;i<lis.length;i++){
            var li = document.createElement("li");//创建li来装小方块
            ol.appendChild(li);//把li追加到ol中去
            li.innerHTML = i+1;//小方块里面的数字编号，因为i从开始，所以是I+1
        }

        //3. 鼠标移入让小方块变色，即让他拥有current类，名就可以了
        var ollis = ol.children;
        ollis[0].setAttribute("class","current");//r让第一个方块有样式，因为总会有一个一打开页面就会有的。所以让第一个有比较方便

        for(var j=0;j<ollis.length;j++){
            ollis[j].setAttribute("index",j);//要给每一个小方块索引
            ollis[j].onmouseover = function () {
               empty();
                this.setAttribute("class","current");
    //4.让小方块的数字和图片对应起来，也就是让ul移动小方块的索引个图片宽度
            var index = this.getAttribute("index");//拿到当前小方块的索引值，因为之前是通过atrribute来设置的，所以只能通过getatrribute来获得
            var target = -imgWidth*index;//当前小方块的索引是比图片的索引小一位的，而图片滚动的时候当前的那一张是不用滚动的，只有下一张动，
            // 所以需要移动的图片数量和当前的小方块索引是一样的..左右移动都是负值
            animate(ul,target);
            }
        }
    //5. 鼠标移入显示左右按钮.移出则隐藏，给按钮注册事件
        box.onmouseover = function () {
            arr.style.display = "block";
            clearInterval(timerId);
        }
        box.onmouseout = function () {
            arr.style.display = "none";
            timerId = setInterval(playNext,1000);//移出之后让他继续自动滚播
        }
    //7.给图片设置滚动事件之前，先克隆第一张图片放到最后作为机动来实现切换
        var firstImg  = lis[0].cloneNode(true);//完全克隆，false的话就是局部克隆
        ul.appendChild(firstImg);//将这个图片追加到最后

    //6.给右按钮注册事件
        var pic = 0;//给一个变量标识图片的索引
        var square = 0;//重新给小方块一个索引
    right.onclick = function () {
            playNext();//直接调用封装的函数就好
        }
    //9.左边（倒退，点击的时候切换到最后一张，然后继续倒退回去，所以是--）和右边（前进，点击的时候切换到第二张，然后继续往下，所以是++）做法相同
        left.onclick = function () {
//            if(pic>0){//不是第一张的时候，就可以倒回来，所以也可以左点了
//                pic--;
//            }//这个方法把他写死了，如果之前没有点击右侧的图片，那么现在点击左侧的图片是没有用的
            if(pic==0){//如果当前已经到第一张，那么就让他迅速跳到最后一张
                pic = lis.length-1;
                ul.style.left = -imgWidth*(lis.length-1) +'px';//也就是最后一张跑到了初始位置，所以此处计算最后一张的路程
            }
            pic--;//如果不是第一张，那么继续从倒回去
            var target = -imgWidth*pic;
            animate(ul,target);
            //让按钮和图片对应
            if(square>0){//不是第一张的时候，切换下一张
                square--;
            }else{//是第一张了，那就让他迅速等于最后一张的索引
                square = ollis.length-1;
            }
            empty();
            ollis[square].setAttribute("class","current");//让小方块变色
        }
    //9.开启自动轮播,封装成了函数（playNext），其实就相当于一直点击右侧按钮，那就给他一个定时器，不停地间隔循环就好
            timerId = setInterval(playNext,1000);//一秒的速度切换一张

    //10.实现鼠标移入图片的时候，让图片停止，在上面的鼠标移入移出那里清除和设置定时器就可以了




        //封装了一个运行下一张图片的函数，那么上面右侧按钮的代码可以直接调用了

        function playNext(){//一个是点击右侧按钮的代码，一个是点击左侧按钮的代码
            if(pic == lis.length-1){//索引走到最后，也就是滚动最后一张了，迅速跳到第一张
                pic = 0;
                ul.style.left = "0px";//让ul迅速回到初始位置，也就是出发点
            }//如果还没走到最后一张，那么索引++，继续切换
//            if(pic<lis.length-1){//这个做法写死了，切换完图片就不能再次从头了
//                pic++;//还没到最后一张之前，一直++切换
//            }
            pic++;//变成下一张的索引继续往下切换
            var target = -imgWidth*pic;//至于切换多少，那就看索引是多少了
            animate(ul,target);
        //下面的小方块也要跟着切换
            if(square < ollis.length-1){
                square++;//还没走到最后一张的时候，继续++切换
            }else{//也就是已经到了第一张的时候
                square = 0;//迅速回到第一个方块
            }
            empty();//判断完之后就可以设置小方块的背景颜色，在这之前把他的其他颜色清空
            ollis[square].setAttribute("class","current");

        }


        //封装了一个清除小方块背景颜色的函数

        function empty(){
            for(var k=0;k<ollis.length;k++){
                ollis[k].removeAttribute("class");//点击之后先清除其他方块的样式，然后才能实现点谁谁变
            }
        }

    /**
     * 封装了一个匀速动画函数
     * @param obj
     * @param target
     */

    function animate(obj,target){
        clearInterval(obj.timerId);//清除之前的定时器，保证只有一个定时器
        obj.timerId = setInterval(function(){
            var leader = obj.offsetLeft;
            var step = 10;
            step = leader<target?step:-step;//判断前进还是后退
            if(Math.abs(leader - target)>Math.abs(step)){//如果距离比步长大，那么就一直跨步
                leader += step;
                obj.style.left = leader +'px';
            }else {//如果距离与已经比步长小，那么再跨步已经超过了，所以就直接赋值让他跳到目标位置就可了，这时候要清除定时器
                clearInterval(obj.timerId);
                obj.style.left = target +'px';
            }
        },15)
    }

</script>
</body>
</html>